<template>
	<view class="lease_details">
		<scroll-view class="lease_details_con" scroll-y>
			<view class="lease_de_item" v-for="(v,n) in pageinfo">
				<text class="lease_de_item_tit">{{v.name}}</text>
				<view class="lease_de_tag">
					<text @click="choselabel(v.type,n,n1)" class="lease_de_tag_item" :class="{lease_de_tag_item_special:v1.ischeck}" v-for="(v1,n1) in v.valueobj">{{v1.name}}</text>
					
				</view>
			</view>

		</scroll-view>
		<view class="lease_details_foo">
			<view class="foo_btn" @click="commit">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageinfo:'',
				labeldata:''
			};
		},
		onShow() {
			this.labeldata = uni.getStorageSync('labelData');
			this.getlabel()
		},
		methods:{
			commit(){
				var that=this
				var k=0
				console.log(this.pageinfo)
				for(var i=0;i<(this.pageinfo.length);i++){
					for(var j=0;j<this.pageinfo[i].valueobj.length;j++){
						if(this.pageinfo[i].valueobj[j].ischeck){
							console.log(this.pageinfo[i].valueobj[j])
							k++
						}
					}
				}
				console.log(k)
				// alert(k)
				if(k==0){
					uni.removeStorage({
					    key: 'labelData',
					    success: function (res) {
					        uni.navigateBack()
					    }
					});
				}else{
					// return
					uni.setStorage({
						key: 'labelData',
						data: that.pageinfo,
						success: function () {
							console.log('success');
								uni.navigateBack()
						}
					});
				}
	
			},
			choselabel(str,fatherIndex,index){
				if(str=="radio"){
					//单选
					if(this.pageinfo[fatherIndex].valueobj[index].ischeck){
						this.pageinfo[fatherIndex].valueobj[index].ischeck=false
					}else{
						for(var i=0;i<this.pageinfo[fatherIndex].valueobj.length;i++){
							this.pageinfo[fatherIndex].valueobj[i].ischeck=false
						}
						this.pageinfo[fatherIndex].valueobj[index].ischeck=true
					}
					
					return
				}
				if(str=="checkbox"){
					//多选
					this.pageinfo[fatherIndex].valueobj[index].ischeck=!this.pageinfo[fatherIndex].valueobj[index].ischeck
					return
				}
			},
			getlabel(){
				this.$http.get('Mini/circle/house/getHouseOption').then(res => {
					for(var i=0;i<res.data.length;i++){
						res.data[i].valueobj=[]
						console.log(i)
						for(var j=0;j<res.data[i].values.length;j++){
						if(this.labeldata){
							console.log(i)
							console.log(this.labeldata[i])
							res.data[i].valueobj.push({
								name:this.labeldata[i].values[j],
								ischeck:this.labeldata[i].valueobj[j].ischeck
							})
						}else{
							res.data[i].valueobj.push({
								name:res.data[i].values[j],
								ischeck:false
							})
						}
						}
					}
					console.log(res.data)
					this.pageinfo=res.data
				})
			}
			
		}
	}
</script>



<style lang="scss">
.lease_details{
	overflow-x: hidden;
	.lease_details_con{ 
		padding: 0 34rpx 0 34rpx;
		height: calc(100vh - 160rpx);
		.lease_de_item{
			.lease_de_item_tit{ 
				font-size: 32rpx;
				font-weight: 700;
			}
			.lease_de_tag{
				margin-top: 39rpx;
				.lease_de_tag_item{
					padding: 0 29rpx;
					margin: 0 18rpx 28rpx 0;
					display: inline-block;
					height: 59rpx;
					line-height: 59rpx;
					text-align: center;
					border: 1rpx solid #A5A5A5;
					border-radius: 5rpx; 
				}
				.lease_de_tag_item_special{
					padding: 0 29rpx;
					margin: 0 18rpx 28rpx 0;
					display: inline-block;
					height: 59rpx;
					line-height: 59rpx;
					text-align: center;
					border: 1rpx solid #FF7430;
					background: #FFE7DB;
					color: #FF7430;
					border-radius: 5rpx; 
				}
			}
		}
	}
	.lease_details_foo{
		position: relative;
		height: 160rpx;
		background-color: #f7f8f9;
		.foo_btn{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			width: 670rpx;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			font-size: 32rpx;
			color: #fff;
			background: #FF7430;
			border-radius: 48rpx; 
		}
	}
}
</style>
